<template>
  <div>
    <div id="simulated_content">
      <div style="height: 60px;width: 75%;display: flex;flex-direction: row;align-items:center;justify-content:space-between;">
        <div style="height: 60px;display: flex;flex-direction: row;align-items:center;justify-content:flex-start;">
          <div style="font-size: 18px;color:#00192f;align-self: flex-end;margin-bottom:15px;margin-right: 20px;">模拟交易列表</div>
          <div class="btn" @click="editboxshow()">
            <span class="glyphicon glyphicon-plus" style="margin-right: 2px;"></span>新建模拟交易
          </div>
        </div>
        
        <!-- <div class="btn" style="background-color: red;">
          <span class="glyphicon glyphicon-trash" style="margin-right: 2px;"></span>删除
        </div> -->
        <div>
          <span class="glyphicon glyphicon-search"></span>
          <input type="text"  placeholder="策略名称" class="form-control" v-model="keyword" id="search" @change="gettradeList" />
        </div>
      </div>

      <div class="segmentation"></div>
      <div style="color: #6e747a;padding-top: 20px;padding-left: 8px;width: 75%;display: flex;align-items:center;justify-content:flex-start;">全部文件</div>
      <table id="strategyTable" class="table table-hover pointer" style="width: 75%;">
        <thead>
          <tr>
            <td width="10%" align="center">序号</td>
            <td width="20%">策略名称</td>
            <td width="10%" align="center">状态</td>
            <td width="30%" align="center">开始时间</td>
            <td width="10%" align="center">累计收益</td>
            <td width="10%" align="center">操作</td>
          </tr>
        </thead>

        <tbody v-if="tradeList !== ''">
          <tr v-for="item in tradeList" :key="item.id">
            <td align="center">{{item.id}}</td>
            <td>
              <img style="width: 20px;height: 20px;" src="../../../static/image/03.png" />
              <span v-if="!editflag">{{item.strategyName}}</span>
              <input type="text" value v-if="editflag" />
            </td>
            <td align="center" style="color:red;font-weight:600;" v-if="item.sate === 0">停止</td>
            <td align="center" style="color:green;font-weight:600;" v-if="item.sate === 1">运行中</td>
            <td align="center">{{item.starttime}}</td>
            <td align="center">{{item.profit}}</td>
            <td align="center">
              <i class="iconfont icon-zhexiantutongji" @click="strategydetail(item.id)"></i>
              <!-- <i class="iconfont icon-edit" @click="strategyEdit(item.id)"></i> -->
              <i v-if="item.sate == 1" class="iconfont icon-guanbi" style="opacity:0.8;" @click.prevent="strategystop(item.id)"></i>
            </td>
          </tr>
          
        </tbody>
      </table>
      <div v-if="totalCount == 0" style="width:75%;text-align:center;margin:30px 10px;font-size:20px;font-weight:600">当前无模拟交易</div>
      <div class="page" style="margin:12px 12px 20px 0px;">
        <Pagination :Current.sync="Current" :limit="limit" :totalCount="totalCount" @turn="gettradeList"></Pagination>
      </div>
    </div>
    <!-- 新建模拟交易 -->
    <el-dialog
      title="提示"
      :visible.sync="newsimu_flag"
      width="30%"
      :before-close="handleClose">
      <div style="font-size:18px;">请前往策略广场选择你需要进行模拟交易策略!</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false;gotoStrategy()">立刻前往</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style>
.el-range-separator{
  width: 10%;
}
.el-range-editor.el-input__inner {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
}
.el-scrollbar__view{
    margin-bottom: 21px;
}

</style>
<style scoped>
.mimachangebox >>> .el-input__inner {
  width: 270px;
}
.iconfont:hover{
  color:#007bff;
}
.iconfont{
  font-size: 25px;
}
#simulated_content {
  padding-top: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#simulated_content h4 {
  margin-bottom: 13px;
}
.segmentation {
  width:75%;
  height: 2px;
  border-top: solid 1px #e8ecf0;
}
.btn {
  display: inline-block;
  margin-left: 20px;
  margin-top: 3px;
  padding: 6px 20px;
  border-radius: 4px;
  background-color: #255da8;
  color: #fff;
  cursor: pointer;
}
.glyphicon {
  padding-top: 2px;
}
.modal {
  display: block;
  padding-right: 16px;
  display: none;
}
.modal_content {
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  background-color: #fff;
}
/* .modal_header {
  background: #0d1c30;
  border-color: #e8ecf0;
  padding: 14px 15px 13px;
  min-height: 16.43px;
  border-bottom: 1px solid #e5e5e5;
} */
.modal_title {
  margin: 0;
  line-height: 1.42857143;
  font-family: inherit;
  font-weight: 500;
  color: #ffffff;
}
.glyphicon-remove {
  float: right;
  color: #c6c7c9;
}
.new_item {
  margin-bottom: 20px;
  clear: both;
}
.item_title {
  color: #333;
  width: 76px;
  float: left;
  line-height: 40px;
  margin-right: 16px;
  display: inline-block;
  margin-bottom: 10px;
}
.item_input,
.item_select {
  height: 40px;
  width: 302px;
  padding: 10px 9px;
  box-shadow: none;
  box-sizing: border-box;
  border: 1px solid #d9e1f1;
  margin-bottom: 0px;
  color: #333;
}
.combo_select {
  /*width: 302px;*/
  border: none;
  margin: 0;
}
.model_footer {
  border-top: none;
  text-align: center;
  padding-bottom: 33px;
}
.model_footer input {
  padding: 11px 66px;
  border: 1px solid #0d1c30;
  background: #fff;
  color: #0d1c30;
  box-shadow: none;
  text-shadow: none;
  border-radius: 2px !important;
}

</style>
<script>
import Pagination  from './../zujian/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      userflag: false,
      editflag: false,
      newsimu_flag: false,
      keyword: "",
      tradeList:[],
      Current: 1,
      limit: 10,
      totalCount: 100,
      SessionToken:'',
      StrategyList:'',
    };
  },
  mounted(){
    this.SessionToken = localStorage.getItem('SessionToken')
    this.gettradeList()
  },
  methods: {
    gotoStrategy(){
      this.$router.push('/strategy_Campaign')
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    useronMouseOver() {
      this.userflag = true;
    },
    useronMouseOut() {
      this.userflag = false;
    }, //策略编辑
    strategyEdit() {
      this.editflag = !this.editflag;
    },
    gettradeList(){
      this.$http.get('inquireBackInList?sessionToken='+this.SessionToken+'&pageIndex='+this.Current+'&pageSize='+this.limit+'&strategyName='+this.keyword+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.totalCount = resp.data.data.total
          if(resp.data.data.list !== []){
            this.tradeList = resp.data.data.list
          }
        }else if(resp.data.status === 499){
              this.$message.error('当前用户没有该权限！')
            } else {
          console.log(resp.data)
        }
      })
    },
    editboxshow() {
      this.newsimu_flag = true;
    },
    editboxquxiaoshow() {
      this.newsimu_flag = false;
    },
    strategydetail(id) {
      localStorage.setItem('inrecordId',id)
      this.$router.push('/gaishu')
    },
    strategystop(id){
      this.$http.post('closeInvestment?sessionToken='+this.SessionToken+'&inrecordId='+id+'').then((resp) => {
        if (resp.data.status === 200) {
          this.$message.success('成功停止模拟交易')
          this.gettradeList()
        } else {
          this.$message.error(resp.data.msg)
        }
      })
    }
    
  }
};
</script>